<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<style type="text/css">

		.pop_con{
			display: none;
		}
		
		.pop{
			position: fixed;
			width: 500px;
			height: 300px;
			background-color: pink;
			border:2px solid #000;
			left: 30%;
			top:30%;
			z-index: 9999;
		}

		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color:#000;
			opacity:0.3;
			filter:alpha(opacity=30);
			z-index: 9990;
		}
		
		#close{
			float: right;
			font-size: 30px;
			text-decoration: none;
		}

	</style>
	<script type="text/javascript">
		
		$(function(){

			$('#btn').click(function(){

				$('.pop_con').fadeIn();
				return false;
			})

			$(document).click(function(){

				$('.pop_con').fadeOut();
			})

			$('.pop').click(function(){

				return false;
			})

			$('#close').click(function(){

				$('.pop_con').fadeOut();
			})
		})
	</script>
</head>
<body>
	<input type="button" name="" value="弹出" id="btn">
	<div class="pop_con">
		<div class="pop">
			弹框中的文字
			投资金额:
			<input type="text" name="">
			<a href="#" id="close">×</a>
		</div>
		<div class="mask"></div>
	</div>
</body>
</html>